<!DOCTYPE html>
<html lang="en">
<body>
      <!-- 输入框表单 -->
    <div
      class="absolute bottom-0 left-0 w-full border-t md:border-t-0 dark:border-white/20 md:border-transparent md:dark:border-transparent md:bg-vert-light-gradient bg-white dark:bg-gray-800 md:!bg-transparent dark:md:bg-vert-dark-gradient pt-2"
    >
      <form
        onsubmit="return false"
        class="stretch mx-2 flex flex-row gap-3 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-2xl xl:max-w-3xl"
      >
        <div class="relative flex h-full flex-1 items-stretch md:flex-col">
          <div class="">
            <div
              class="h-full flex ml-1 md:w-full md:m-auto md:mb-2 gap-0 md:gap-2 justify-center"
            ></div>
          </div>
          <div
            class="flex flex-col w-full py-2 flex-grow md:py-3 md:pl-4 relative border border-black/10 bg-white dark:border-gray-900/50 dark:text-white dark:bg-gray-700 rounded-md shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]"
          >
            <textarea
              id="prompt-textarea"
              oninput="getInput()"
              tabindex="0"
              data-id="root"
              rows="1"
              onfocus="getFocus()"
              placeholder="Send a message..."
              class="m-0 w-full resize-none border-0 bg-transparent p-0 pr-7 focus:ring-0 focus-visible:ring-0 dark:bg-transparent pl-2 md:pl-0"
              style="max-height: 160px; overflow-y: auto; outline: none"
            ></textarea>
            <button
              id="submit"
              onclick="submitMessage()"
              class="absolute p-1 rounded-md md:bottom-3 md:right-3 right-2 text-gray-400 bg-brand-purple text-white transition-colors disabled:opacity-40"
              style="width: 24px; height: 24px"
              disabled
            >
              <span data-state="closed"
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 16 16"
                  fill="none"
                  class="h-4 w-4"
                  stroke-width="2"
                >
                  <path
                    d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
                    fill="currentColor"
                  ></path></svg></span>
            </button>

            <div
              id="loading"
              class="hidden absolute p-1 rounded-md sm:bottom-3 sm:p-2 sm:right-3 md:bottom-3 md:p-2 md:right-3 right-2 animate-spin"
              style="
                width: 24px;
                height: 24px;
                border: 1px solid #f3f3f3;
                border-radius: 50%;
                border-top: 1px solid #1fe229;
              "
            ></div>
          </div>
        </div>
      </form>
      <div
        class="px-3 pb-3 pt-2 text-center text-xs text-gray-600 dark:text-gray-300 md:px-4 md:pb-6 md:pt-3"
      >
        <span
          >Free Research Preview. AI-Chat may produce inaccurate information
          about people, places, or facts.
          <a
            href="https://help.openai.com/en/articles/6825453-chatgpt-release-notes"
            target="_blank"
            rel="noreferrer"
            class="underline"
            >AI-Chat May 24 Version</a
          ></span
        >
      </div>
    </div>
</body>
</html>